<template>
  <div class="m-[25px_15px] md:m-[25px_40px] xl:m-[50px] lg:flex">
    <div
      class="hidden lg:block lg:w-1/4 lg:max-w-[400px] lg:pr-[30px] xl:pr-[50px]"
    >
      <div class="relative h-0 pt-[150.27%] overflow-hidden bg-secondary">
        <UseImage
          :src="avatar"
          width="200"
          height="600"
          class="absolute top-0 left-0 size-full"
          :alt="person.name"
        >
          <template #loading>
            <div class="flex items-center justify-center size-full">
              <RiLoaderLine class="size-8 animate-spin" />
            </div>
          </template>

          <template #error>
            <div class="flex items-center justify-center size-full">
              <RiFileImageLine class="size-9" />
            </div>
          </template>
        </UseImage>
      </div>
    </div>

    <div class="lg:flex-[1]">
      <div
        class="max-w-[1000px] mb-[30px] overflow-hidden text-[15px] text-[#fafafa] xl:text-base"
      >
        <h2 class="mb-[10px] text-lg text-white xl:text-[24px]">
          {{ person.name }}
        </h2>

        <div v-if="person.biography">
          <img
            class="float-left w-[40%] max-w-[200px] mr-[15px] lg:hidden"
            v-if="avatar"
            :src="avatar"
            :alt="person.name"
          />
          <div>
            <p v-for="item in biography" :key="item">{{ item }}</p>
          </div>
        </div>
      </div>

      <div class="mb-[30px] text-[15px] text-[#f2f2f2] xl:text-base">
        <ul class="xl:flex xl:flex-wrap">
          <li
            class="flex py-[2] lg:w-1/2 2xl:w-full"
            v-if="person.known_for_department"
          >
            <div
              class="flex-1 max-w-[90px] mr-[15px] text-white sm:max-w-[140px]"
            >
              Known For
            </div>
            <div class="flex-[2]">
              {{ person.known_for_department }}
            </div>
          </li>
          <li class="flex py-[2] lg:w-1/2 2xl:w-full" v-if="person.birthday">
            <div
              class="flex-1 max-w-[90px] mr-[15px] text-white sm:max-w-[140px]"
            >
              Born
            </div>

            <div class="flex-[2]">
              {{ fullDate(person.birthday) }}
              <span v-if="!person.deathday">(age {{ age }})</span>
            </div>
          </li>
          <li
            class="flex py-[2] lg:w-1/2 2xl:w-full"
            v-if="person.place_of_birth"
          >
            <div
              class="flex-1 max-w-[90px] mr-[15px] text-white sm:max-w-[140px]"
            >
              Place of Birth
            </div>

            <div class="flex-[2]">
              {{ person.place_of_birth }}
            </div>
          </li>
          <li class="flex py-[2] lg:w-1/2 2xl:w-full" v-if="person.deathday">
            <div
              class="flex-1 max-w-[90px] mr-[15px] text-white sm:max-w-[140px]"
            >
              Died
            </div>

            <div class="flex-[2]">
              {{ person.deathday | fullDate }}
              <span v-if="person.birthday">(aged {{ age }})</span>
            </div>
          </li>
        </ul>
      </div>

      <ExternalLinks media="person" :links="person.external_ids" />
    </div>
  </div>
</template>
<script setup>
import { apiImgUrl } from "@/api";
import ExternalLinks from "./ExternalLinks.vue";
import { UseImage } from "@vueuse/components";
import { RiFileImageLine, RiLoaderLine } from "vue-icons-plus/ri";
import { fullDate } from "@/lib/filter";
import { computed } from "vue";
const { person } = defineProps({
  person: {
    type: Object,
    required: true,
  },
});

const avatar = computed(() => {
  if (person.profile_path) {
    return `${apiImgUrl}/w370_and_h556_bestv2${person.profile_path}`;
  } else {
    return null;
  }
});

const biography = computed(() => {
  return person.biography.split("\n").filter((section) => section !== "");
});

const age = computed(() => {
  const born = person.birthday;
  const died = person.deathday;

  if (born && !died) {
    return getAge(born);
  } else if (born && died) {
    return getAge(born, died);
  } else {
    return false;
  }
});

if (person.homepage) {
  person.external_ids.homepage = person.homepage;
}

const getAge = (born, died) => {
  const startDate = new Date(born);
  let endDate;
  let age;
  if (!died) {
    endDate = new Date();
  } else {
    endDate = new Date(died);
  }
  const month = endDate.getMonth() - startDate.getMonth();
  age = endDate.getFullYear() - startDate.getFullYear();
  if (month < 0 || (month === 0 && endDate.getDate() < startDate.getDate())) {
    age--;
  }
  return age;
};
</script>
